import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { NavLink } from "react-router-dom";
import { ProgramRightWrap } from "./style";
import { djProgram } from "../../djRadio/store/actionType";
import { getSizeImage } from "@/utils/format-utils";

export default memo(function ProgramRight(props) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(djProgram(props.id));
  }, [dispatch, props.id]);
  const { djPrograms } = useSelector(
    (state) => ({
      djPrograms: state.getIn(["djradio", "djPrograms"]),
    }),
    shallowEqual
  );
  // (djPrograms) 1为空 2为400 3为200
  return (
    <ProgramRightWrap>
      <h3>
        <span>
          <a>更多节目</a>
        </span>
        <NavLink
          to={{
            pathname: "/djradio",
            search: "?id=" + props.id,
          }}
          className="all"
        >
          全部&gt;
        </NavLink>
      </h3>
      <div className="program-right-box">
        {djPrograms.code == 200
          ? djPrograms.programs.slice(0, 6).map((item, index) => {
              return item.id !== Number(props.lid) ? (
                <div key={item.id} className="program-right-imgtext">
                  <NavLink
                    to={{
                      pathname: "/program",
                      search: "?id=" + item.id,
                    }}
                  >
                    <img src={getSizeImage(item.coverUrl, 50)} alt="" />
                  </NavLink>
                  <div className="program-right-p">
                    <p>
                      <NavLink
                        to={{
                          pathname: "/program",
                          search: "?id=" + item.id,
                        }}
                      >
                        {item.name}
                      </NavLink>
                    </p>
                    <p>Vol.{item.serialNum}</p>
                  </div>
                </div>
              ) : (
                ""
              );
            })
          : ""}
      </div>
    </ProgramRightWrap>
  );
});
